<template>
  <div class="conMain">
    <count :cdata="cdata" />
    <!-- <el-row :gutter="20" class="mt20">
      <el-col :span="12" :xs="24">
        <rate :title="rateTitle" :timeTitle="timeTitle" :list='ratelist' @change-time='changeTime'   v-if="reFresh"/>
      </el-col>
      <el-col :span="12" :xs="24">
        <pole :title="xsTitle" :timeTitle="xstimeTitle" :list='polelist' @change-time='changeTime' v-if="xsreFresh"/>
      </el-col>
    </el-row> -->
    <user :title="uTitle" :timeTitle="utimeTitle" :list='ulist' @change-time='changeTime' v-if="ureFresh"  class="mt20"/>
  </div>
</template>

<script>

import count from './components/count'
import user from './components/user'
import rate from './components/rate'
import pole from './components/pole'
import { dashboard } from '@/api/index'

export default {
  name: 'Home',
  components: { count,user,rate,pole },
  data() {
    return {
      rateTitle:'商品销售占比',
      timeTitle:'最近7天',
      xsTitle:'商品库存',
      xstimeTitle:'最近7天',
      uTitle:'订单数据',
      utimeTitle:'最近7天',
      ratelist:[],
      polelist:[],
      ulist:[],
      cdata:[],
      reFresh:false,
      xsreFresh:false,
      ureFresh:false,
      params:{
        type:0,
        date:'day30',
      }
    }
  },
   watch:{
      ratelist(){
        this.reFresh= false
        this.$nextTick(()=>{
          this.reFresh= true
        })
      },
      polelist(){
        this.xsreFresh= false
        this.$nextTick(()=>{
          this.xsreFresh= true
        })
      },
      ulist(){
        this.ureFresh= false
        this.$nextTick(()=>{
          this.ureFresh= true
        })
      }
  },
  created() {
    this.getdata();
  },
  mounted() {
  },
  methods: {
    changeTime(type,date,timeTitle){
      this.params={
        type:type,
        date:date,
      }
      if( type==1 ){
        this.timeTitle=timeTitle;
      }else if(type==2){
        this.xstimeTitle=timeTitle
      }else if(type==3){
        this.utimeTitle=timeTitle
      }

      this.getdata();
    },
    getdata(){
      dashboard(this.params).then(res => {
        if(this.params.type==1){
          this.ratelist=res.data.rate
        }else if(this.params.type==2){
          this.polelist=res.data.pole
        }else if(this.params.type==3){
          this.ulist=res.data.user
        }else{
          this.ratelist=res.data.rate
          this.polelist=res.data.pole
          this.ulist=res.data.user
          this.cdata =res.data.cdata
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
